<template>
	<view class="u-p-b-20">
		<view class="note-card">
			<!-- 封面 -->
			<view class="u-radius-8" style="width: 100%;max-height: 600rpx;overflow: hidden;">
				<x-image :src="showImage(firstImage, 'logo')" mode="widthFix"></x-image>
			</view>
			
			<view style="padding: 10rpx 14rpx 20rpx;">
				<view
				class="linecamp-2 u-f-28 u-lh-40"
				style="height: 80rpx;">{{ item.title || '' }}</view>
				
				<view class="flex-center-between u-m-t-16 u-f-20 u-lh-28">
					<view class="flex-center">
						<view class="u-avatar-38 clear-flex u-m-r-8">
							<x-image :src="showImage(item.avatar, 'logo')" mode="widthFix"></x-image>
						</view>
						<view class="linecamp-1 clear-flex" style="color: #797979;">{{ item.nick || '' }}</view>
					</view>
					<view class="clear-flex flex-center">
						<view class="u-m-r-8">
							<u-icon :name="`liked${item.hasLiked ? '-active' : ''}`" custom-prefix="u" size="28" :color="item.hasLiked ? likedColor: defaultColor"></u-icon>
						</view>
						<view class="color-grew">{{ item.likeCount || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			}
		},
		data() {
			return {
				defaultColor: '#BFBFC1',
				likedColor: '#F94404',
			}
		},
		computed: {
			firstImage() {
				let urls = this.item.imgUrls || ''
				let image = urls.split(',')[0]
				image = image.split('&cover=')
				return image[1] || image[0]
			}
		}
	}
</script>

<style scoped lang="scss">
	.note-card {
		position: relative;
		width: 100%;
		background-color: #F9F9F9;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		overflow: hidden;
	}
</style>
